import React from 'react';
import { Text, View } from '@tarojs/components';
import { GDynamicValue, GStyleSheet, DynamicColors } from '@/utils/DarkMode';
import './index.less';

interface IProps {
  title: string;
  num: number;
  isError?: boolean;
  isDashed?: boolean;
  isEnd?: boolean;
}
const dstyles = GStyleSheet.create({
  contains: {
    marginTop: 20,
    marginBottom: 20,
    marginLeft: 15,
    marginRight: 15,
  },
  line: {
    // height: 0.5,
    // flex: 1,
    // borderWidth: 0.5,
    borderColor: new GDynamicValue('#979797', '#8e8e8e'),
    // borderStyle: 'dashed',
    // borderRadius: 0.1,
  },
  context: {
    marginLeft: 10,
    marginRight: 10,
  },
  num: { color: '#fff' },
  numView: {
    width: 24,
    height: 24,
    borderRadius: 100,
    marginRight: 10,
  },
  title: {
    color: new GDynamicValue('#333', '#ABABAB'),
  },
});

const DashedTitle: React.FC<IProps> = React.memo(
  ({ num, title, isError, isDashed, isEnd }) => {
    const styles = dstyles.useDynamicStyle();
    return (
      <View className='centerFlex dashedTitle'>
        {isDashed && (
          <View style={styles.line} className={`dashedLine ${num === 1 ? 'opacity' : ''}`} />
        )}
        <View style={styles.context} className='centerFlex'>
          {isDashed && (
            <View
              className='centerFlex'
              style={{
                ...
                styles.numView,
                backgroundColor: isError ? '#F05353' : DynamicColors.tintColor.value,
              }}
            >
              <Text style={styles.num}>{num}</Text>
            </View>
          )}
          <Text style={styles.title}>{title}</Text>
        </View>
        {isDashed && <View style={styles.line} className={`dashedLine ${isEnd ? 'opacity' : ''}`} />}
      </View >
    );
  }
);

export default DashedTitle;
